<template>
  <v-btn
      color="pink"
      dark
      fab
      id="backTop"
      @click="goTop"
  >
    <v-icon>mdi-arrow-up-bold-box-outline</v-icon>
  </v-btn>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  name: "BackTop",
  mounted() {
    window.addEventListener('scroll',() => {
      if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
        document.getElementById("backTop").style.display = "block";
      } else {
        document.getElementById("backTop").style.display = "none";
      }
    })
  },
  methods: {
    goTop(){
      let myTimer = -1
      let scrollTo = document.documentElement.scrollTop || document.body.scrollTop
      if(myTimer = -1){
        myTimer = setInterval(() => {
          scrollTo -= 60
          if(scrollTo<=0){
            scrollTo = 0
            window.clearInterval(myTimer)
            myTimer = -1
          }

          window.scrollTo(0,scrollTo) //这是值  是指离开网页顶部的距离
        }, 10);

      }

    }
  }
})
</script>

<style scoped>
#backTop {
  z-index: 1000;
  position: fixed;
  bottom: 10vh;
  right: 6vw;
  display: none;
  opacity: .8;
}
</style>